<!-- 平台入口 -->
<template>
  <div class="main-app"
        v-loading="loading"
        element-loading-text="页面数据加载中..."
        :element-loading-spinner="svg"
        element-loading-svg-view-box="-10, -10, 50, 50"
        element-loading-background="rgba(122, 122, 122, 0.8)">
    <!--  头部  -->
    <div class="main-app-header">
      <span class="title">中山市嘉晖金属制品有限公司</span>
      <!--   logo   -->
      <img class="header-logo" src="@/assets/icons/logo.png">
      <!--  时间组件   -->
      <div class="header-data">
        <el-config-provider :locale="locale">
          <el-date-picker
              v-model="dateRef"
              type="month"
              placeholder="请选择"
              value-format="YYYY-MM"
              @change="handleInput"
              :clearable="false"
          />
        </el-config-provider>
      </div>
    </div>
    <!--  中间展示区域  -->
    <div class="main-app-ctn">
      <!-- 综合指标   -->
      <div class="ctn-box main-app-ctn-top">
        <div class="ctn-box-title">综合指标</div>
        <div class="ctn-box-base">
          <div class="box">
            <img src="@/assets/icons/icon2.png"/>
            <div class="box-details">
              <div class="box-details-row bdr-1">
                  <span class="sp1"><em>{{dateRef}}月出货金额</em><i>￥{{caleData(baseInfo?.declarationAmountSum) ?? '--'}}</i></span>
                  <span class="sp1"><em>较上月</em><i :class="[icon]">{{baseInfo?.declarationAmountCompareLastMonth ?? '--'}}%</i></span>
              </div>
              <div class="box-details-row">
                <span class="sp2">上年同期总金额:<i>{{caleData(baseInfo?.lastYearSameMonthDeclarationAmountSum) ?? '--'}}</i></span>
                <span class="sp2">上年总销售金额:<i>{{caleData(baseInfo?.lastYearDeclarationAmountSum) ?? '--'}}</i></span>
              </div>
            </div>
          </div>
          <div class="box">
            <img src="@/assets/icons/icon1.png"/>
            <div class="box-details">
              <div class="box-details-row bdr-1">
                <span class="sp1"><em>应收货款</em><i>{{caleData(baseInfo?.receivablePayment) ?? '--'}}</i></span>
                <span class="sp1"><em>逾期未收货款</em><i>{{caleData(baseInfo?.overdueNotPayment) ?? '--'}}</i></span>
              </div>
            </div>
          </div>
          <div class="box">
            <img src="@/assets/icons/icon3.png"/>
            <div class="box-details">
              <div class="box-details-row bdr-1">
                <span class="sp1">{{dateRef}}月出货柜数<i>{{baseInfo?.sameMonthCabinetNumber ?? '--'}}</i></span>
                <span class="sp1">上月出货柜数<i>{{baseInfo?.lastMonthCabinetNumber}}</i></span>
              </div>
              <div class="box-details-row">
                <span class="sp2">上年同期柜数:<i>{{baseInfo?.lastYearSameMonthCabinetNumber}}</i></span>
                <span class="sp2">上年总柜数:<i>{{baseInfo?.lastYearCabinetNumber}}</i></span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 详细指标   -->
      <div class="main-app-ctn-box">
        <!-- 支出指标   -->
        <expensive :monthParams="dateRef"></expensive>
        <!-- 原材料指标   -->
        <material :monthParams="dateRef"></material>
        <!-- 耗材支出指标   -->
        <consumables :monthParams="dateRef"></consumables>
        <!-- 耗能情况指标   -->
        <energy :monthParams="dateRef"></energy>
      </div>
    </div>
  </div>
</template>

<script lang="ts" name="Home" setup>
import {ref} from "vue";
import formatDate,{caleData,caleCount} from "@/utils/baseCfg";
// 汉化elementUI plus,新版本ep路径有修改，在es路径下
import locale from 'element-plus/es/locale/lang/zh-cn';
import Expensive from "@/views/home/components/expensive.vue";
import Material from "@/views/home/components/material.vue";
import Consumables from "@/views/home/components/consumables.vue";
import Energy from "@/views/home/components/energy.vue";
import {IBase} from "@/api/interface/base";
import {getPaymentStatusApi, getSalesAmountApi, getSalesNumberApi} from "@/api/modules/base";

// 加载进度
const loading = ref<boolean>(false)
// 右上角时间下拉框
const dateRef = ref(formatDate(new Date()))
// 综合指标
let baseInfo: any = {} = ref({})
// 下拉日期选中时事件
const handleInput = (val:any) => {
  if (val.trim() === '') return
  getData()
}
let icon = ref('i-up')
// 后台获取数据
const getData = async () => {
  const params = reactive<IBase.Params>({
    month: parseInt(dateRef.value.split('-')[1]),
    year: dateRef.value.split('-')[0]
  })
  const {data: data1} = await getSalesAmountApi(params)
  const {data: data2} = await getPaymentStatusApi(params)
  const {data: data3} = await getSalesNumberApi(params)
  Object.assign(baseInfo.value,data1,data2,data3)
  if(baseInfo.value?.declarationAmountCompareLastMonth){
    icon.value = caleCount(baseInfo.value?.declarationAmountCompareLastMonth) ? 'i-up' : 'i-down'
  }
}
onMounted(() => {
  getData()
})

</script>

<style lang="scss">
@use 'home';
</style>